<template>
	<view class="wallet bg-shop  hv100  clearfix ">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">认证支付</block>
		</cu-custom>
		<view class="flex align-center justify-between wp100 bg-white mt5 py15 px15">
			<view class="">认证费用</view>
			<view class="text-red">{{money}}元</view>
		</view>
		<view class="flex flex-direction wp100 bg-white mt5 px15">
			<view class="py15">选择支付方式</view>
			<view class="flex flex-direction">
				<view class="flex align-center pt15 pb15" >
					<image src="/static/order/choice.png" v-if="radio==3" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=3" v-else class="block20"></image>
					<image src="/static/order/yue.png" class="block25  ml20 mr10" mode=""></image>
					<text class=" ">余额</text>
				</view>
				<view class="flex align-center pt10 pb5" >
					<image src="/static/order/choice.png" v-if="radio==1" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=1" v-else class="block20"></image>
					<image src="/static/order/weixin@2x.png" class="block25  ml20 mr10" mode=""></image>
					<text class=" ">微信</text>
				</view>
				<view class="flex align-center pt15 pb15" >
					<image src="/static/order/choice.png" v-if="radio==2" class="block20"></image>
					<image src="/static/order/nochoice.png" @click="radio=2" v-else class="block20"></image>
					<image src="/static/order/airpay.png" class="block25  ml20 mr10" mode=""></image>
					<text class=" ">支付宝</text>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white mt1 px15 pb15" v-if="radio==3">
			<view class="py15">支付密码</view>
			<input maxlength="6" v-model="paypwd" class="f14" password placeholder="请输入支付密码" />
		</view>
		<view class="confirm-fenge"></view>
		<view class="confirm-box flex align-center justify-between">
			<view class="flex align-center pl15">
				<text class="text-black ">总计:</text>
				<text class="text-prices ml10 f16">￥{{money}}</text>
			</view>
			<view class="confirm-box-button discenter text-white" v-if="dibuorders" @click="payOrder">立即认证</view>
			<view class="confirm-box-buttons discenter text-black" v-else >立即认证</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			money:0,
			dibuorders:true,	//点击确认按钮时隐藏，防止重复点击
			radio:3,//支付方式
			paypwd:'',
			//选择配送类型和支付类型
			paylist:[
				{
					provider: 'wxpay',
					name: '微信',
					icon: '/static/payment/wechat@2x.png'
				},
				{
					provider: 'alipay',
					name: '支付宝',
					icon: '/static/payment/alipay@2x.png'
				},
				],
			name:'',
			idcard:''
		}
	},
	onLoad(e) {
		this.money=e.money
		this.name=e.name 
		this.idcard=e.idcard
	},
	methods: {
		...mapActions([ 'setOrder']),
		async payOrder() {
			
			if(this.radio==3){
				if(this.paypwd==''){
					uni.showToast({
						title:'请输入支付密码',
						icon:'none'
					})
					return false
				}else{
					this.dibuorders=false
					let params={
						zName:this.name,
						zIdCard:this.idcard,
						payType:this.radio,
						payPassword:this.paypwd
					}
					let { data } = await this.$http.post('user.shiming', params,{ tipConfig: {isLoading: true, isSuccessTip: true } })
					setTimeout(() => {
						this.$Router.pushTab('/pages/user/index')
					}, 800)
				}
			}else{
				uni.showToast({
					title:'支付方式暂未开通',
					icon:'none'
				})
				return false
			}
			//this.requestPayment(data)
		},
		async requestPayment(data) {
			let provider = this.paymentType[this.radio]
			let [err, res] = await uni.requestPayment({
				provider: provider,
				orderInfo: data
			})
			if (res) {
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.switchTab({
						url:'/pages/user/index'
					})
				}, 1500);
			}
			if (err) {
				uni.showToast({
					title: '支付失败!重新支付',
					icon: 'none'
				})
				this.dibuorders=true
			}
		}
	}
}
</script>

<style>
.wsaddress{
	width: calc(100% - 128rpx);
	margin-left: 20rpx;
}
.mworde{
	width: calc(100% - 170rpx);
}
.dibuorder{
	position: fixed;
	z-index: 199;
	bottom: 0;
}
.w100{
	width: 200rpx;
}
.bg-fense{
	background-color: #FFECE5;
	width: 150rpx;
}
.block10{
	width: 20rpx;
	height: 20rpx;
}
.addrsspic{
	width: 32rpx;
	height: 44rpx;
}
.mengceng{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	background-color: #050505;
	opacity: 0.5;
	z-index:131;
}
.bg-mengceng{
	background-color: #050505;
	opacity: 0.5;
}
.choice-box{
	width: 520rpx;
	height:auto;
	position: absolute;
	z-index: 132;
	left: calc(50% - 260rpx);
	top:calc(50vh -  150rpx);
	border-radius: 10px;
}
.choice-line{
	width: 100%;
	height: 1rpx;
	background-color: #edeeef;
}
.py24{
	padding-top: 48rpx;
	padding-bottom: 48rpx;
}
.confirm-box{
	width: 100%;
	height: 110rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
}
.confirm-box-button{
	width: 285rpx;
	height: 110rpx;
	background-color: #FE4725;
}
.confirm-box-buttons{
	width: 285rpx;
	height: 110rpx;
	background-color: #CCCCCC;
}
.confirm-fenge{
	height: 130rpx;
	background-color: #F7F7F7;
}
</style>
